<!--
 * @Author: pgz285 1272160626@qq.com
 * @Date: 2022-09-07 20:43:46
 * @LastEditors: pgz285 1272160626@qq.com
 * @LastEditTime: 2022-09-07 21:26:00
 * @FilePath: /element-admin/src/components/TabMenu.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="main-box">
    <div class="tab-menu hor-center">
      <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/set' }">活动管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }">活动列表</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }">活动详情</el-breadcrumb-item>
      </el-breadcrumb> -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item v-for="breadCrumbItem in breadCrumbList" :key="breadCrumbItem.path"
                            :to="breadCrumbItem.path">
          {{ breadCrumbItem.meta.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <router-view/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabMenu',
  computed: {
    breadCrumbList() {
      return this.$route.matched;
    }
  },
}
</script>

<style scoped>
.main-box {
  width: 100%;
}

.tab-menu {
  height: 60px;
  padding-left: 25px;
}

/*  */
.container {
  width: 100%;
  padding: 0 25px;
}
</style>